<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <title>酷鲨商城后台管理系统</title>
  <style>
    /* 设置body样式 */
    body {
      margin: 0;
    }

    /* 设置头部样式 */
    .el-header {
      background-color: #0096dc;
      line-height: 60px;
    }

    .el-header h1 {
      margin: 0;
      font-size: 22px;
      color: #fff;
    }

    .el-header h1 small, .el-header h1 small a {
      font-size: 15px;
      float: right;
      color: #fff;
      text-decoration: none;
    }

    /* 设置侧栏样式 */
    .el-aside {
      background-color: #545c64;
    }

    /* 表单样式 */
    .el-form{
      width: 66%;
    }
    .el-breadcrumb{
      margin-bottom: 20px;
    }
    /* banner 图片上传控件样式 */
    .banner-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 865px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      border: #b1b1b1 2px dashed;
    }
    .banner {
      width: 865px;
      height: 300px;
      display: block;
    }
    /* 商品图片上传控件样式 */
    .product-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 150px;
      height: 150px;
      line-height: 150px;
      text-align: center;
      border: #b1b1b1 2px dashed;
    }
    .product {
      width: 150px;
      height: 150px;
      display: block;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部开始 -->
    <el-header>
      <h1>
        酷鲨商城后台管理系统
        <small>
          <span v-if="username">{{username}}</span> 您好！
          <a v-if="username" href="" @click="logout"><i class="el-icon-switch-button"> 登出</i></a>
          <a v-else href="login.html">登入</a>
        </small>
      </h1>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-container>
      <!-- 侧栏开始 -->
      <el-aside width="200px">
        <!--侧栏开始-->
        <el-menu @select="handleMenuSelect"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :default-active="activeMenuIndex">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-receiving"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="1-1"><i class="el-icon-notebook-2"></i> 分类列表</el-menu-item>
            <el-menu-item index="1-2"><i class="el-icon-circle-plus-outline"></i> 添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-picture"></i>
              <span>轮播图</span>
            </template>
            <el-menu-item index="2-1"><i class="el-icon-notebook-2"></i> 轮播图列表</el-menu-item>
            <el-menu-item index="2-2"><i class="el-icon-circle-plus-outline"></i> 添加轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1"><i class="el-icon-notebook-2"></i> 商品列表</el-menu-item>
            <el-menu-item index="3-2"><i class="el-icon-circle-plus-outline"></i> 添加商品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-news"></i>
              <span>新闻管理</span>
            </template>
            <el-menu-item index="4-1"><i class="el-icon-notebook-2"></i> 新闻列表</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-circle-plus-outline"></i> 添加新闻</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--侧栏结束-->
      <el-main>
        <div v-if="activeMenuIndex=='1-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
          </el-breadcrumb>
<!--分类表格开始-->
<el-table  :data="categories">
  <el-table-column prop="id" label="编号" width="50"/>
  <el-table-column prop="name" label="分类名称" width="300"/>
  <!--自定 显示格式formatter, 链接到格式化函数 formatBoolean -->
  <el-table-column prop="display" label="首页显示" width="90" :formatter="formatBoolean"/>
  <el-table-column prop="orderNum" label="排序" width="90"/>
  <el-table-column label="操作">
    <!--slot-scope="scope" 定义了一个scope变量,
    在此变量中保存着当前行的相关信息
    scope.$index 得到当前行对应的下标
    scope.row得到的是当前行对应的数组里面的对象
    此处的template必须添加-->
    <template slot-scope="scope">
      <el-button
              size="mini"
              type="primary"
              @click="editCategory(scope.$index, scope.row)">修改
      </el-button>
      <el-button
              size="mini"
              type="danger"
              @click="deleteCategory(scope.$index, scope.row)">删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
<!--分类表格结束-->
        </div>
        <div v-if="activeMenuIndex=='1-2'">
          <!-- 添加分类表单-->
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加分类</el-breadcrumb-item>
          </el-breadcrumb>
          <!--添加分类表单开始-->
          <el-form label-width="140px" ref="add-category-form" v-model="category">
            <el-form-item label="分类名称">
              <el-input v-model="category.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="首页显示">
              <el-switch v-model="category.display" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="category.orderNum" :min="1" :max="999"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addCategory">添加分类</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activeMenuIndex=='1-3'">
          <!-- 修改分类 -->
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改分类</el-breadcrumb-item>
          </el-breadcrumb>
          <!--修改分类表单开始-->
          <el-form label-width="140px" ref="edit-category-form" v-model="category">
            <el-form-item label="分类名称">
              <el-input v-model="category.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="首页显示">
              <el-switch v-model="category.display"></el-switch>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="category.orderNum" :min="1" :max="999"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateCategory">修改分类</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activeMenuIndex=='2-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
          </el-breadcrumb>
          <!--轮播图表格开始-->
          <el-table :data="banners">
            <el-table-column prop="id" label="编号" width="200"></el-table-column>
            <el-table-column label="轮播图" width="300">
              <!--自定义列 显示轮播图图片 必须添加template-->
              <template slot-scope="scope">
                <!--scope.row代表当前行对应的数据里面的对象-->
                <img :src="scope.row.image" width="100%">
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="editBanner(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteBanner(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--轮播图表格结束-->
        </div>
        <!-- 添加轮播图 -->
        <div v-if="activeMenuIndex=='2-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加轮播图</el-breadcrumb-item>
          </el-breadcrumb>
          <!--添加轮播图表单开始-->
          <el-form label-width="140px" ref="add-banner-form" v-model="banner">
            <el-form-item label="轮播图">
              <el-upload
                      class="picture"
                      action="/api/upload/images"
                      name="imageFile"
                      :show-file-list="false"
                      :on-success="handleBannerUploadSuccess"
                      :before-upload="beforeBannerUpload">
                <img v-if="banner.image" :src="banner.image" class="banner">
                <i v-else class="el-icon-plus banner-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="banner.orderNum" :min="1" :max="999"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addBanner">添加轮播图</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 修改轮播图 -->
        <div v-if="activeMenuIndex=='2-3'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改轮播图</el-breadcrumb-item>
          </el-breadcrumb>
          <!--修改轮播图表单开始-->
          <el-form label-width="140px" ref="edit-banner-form" v-model="banner">
            <el-form-item label="编号">
              <el-input v-model="banner.id" placeholder="请输入轮播图编号" disabled></el-input>
            </el-form-item>
            <el-form-item label="轮播图">
              <el-upload
                      class="avatar-uploader"
                      action="/api/upload/images"
                      name="imageFile"
                      :show-file-list="false"
                      :on-success="handleBannerUploadSuccess"
                      :before-upload="beforeBannerUpload">
                <img v-if="banner.image" :src="banner.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="banner.orderNum" :min="1" :max="999"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateBanner">修改轮播图</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 商品列表 -->
        <div v-if="activeMenuIndex=='3-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>
          <!--商品表格开始-->
          <el-table v-if="activeMenuIndex=='3-1'" :data="products">
            <el-table-column prop="id" label="编号" width="60"></el-table-column>
            <el-table-column prop="title" label="标题" width="200"></el-table-column>
            <el-table-column label="图片" width="80">
              <!--自定义列 显示轮播图图片 必须添加template-->
              <template slot-scope="scope">
                <!--scope.row代表当前行对应的数据里面的对象，也就是product-->
                <img :src="scope.row.image" width="100%">
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="折扣价格" width="80"></el-table-column>
            <el-table-column prop="price" label="原价" width="80"></el-table-column>
            <el-table-column prop="sales" label="销量" width="80"></el-table-column>
            <el-table-column prop="stock" label="库存" width="80"></el-table-column>
            <el-table-column prop="categoryName" label="分类" width="100"></el-table-column>
            <el-table-column prop="views" label="浏览量" width="80"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="editProduct(scope.$index, scope.row)">修改
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteProduct(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--商品表格结束-->
        </div>
        <!-- 添加商品 -->
        <div v-if="activeMenuIndex=='3-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
          </el-breadcrumb>
          <!--添加商品表单开始-->
          <!--
public record ProductManagementVO(Integer id, String title, String image,
                        Double discount,
                        Double price, Integer sales, Integer stock,
                        Integer categoryId, Integer views,
                        String categoryName) {
}

-->
          <el-form label-width="140px" ref="add-product-form" v-model="product">
            <el-form-item label="标题">
              <el-input v-model="product.title" placeholder="请输入商品标题"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                      class="picture"
                      action="/api/upload/images"
                      name="imageFile"
                      :show-file-list="false"
                      :on-success="handleProductUploadSuccess"
                      :before-upload="beforeProductUpload">
                <img v-if="product.image" :src="product.image" class="product">
                <i v-else class="el-icon-plus product-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="折扣价格">
              <el-input v-model="product.discount" placeholder="请输入折扣价格"></el-input>
            </el-form-item>
            <el-form-item label="原价">
              <el-input v-model="product.price" placeholder="请输入商品原价"></el-input>
            </el-form-item>
            <el-form-item label="销量">
              <el-input v-model="product.sales" placeholder="请输入商品销量"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input v-model="product.stock" placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="product.categoryId" placeholder="请选择商品分类">
                <el-option
                        v-for="category in categories"
                        :key="category.id"
                        :label="category.name"
                        :value="category.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="浏览量">
              <el-input v-model="product.views" placeholder="请输入商品浏览量"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addProduct">添加商品</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 修改商品 -->
        <div v-if="activeMenuIndex=='3-3'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改商品</el-breadcrumb-item>
          </el-breadcrumb>
          <!--修改商品表单开始-->
          <el-form label-width="140px" ref="edit-product-form" v-model="product">
            <el-form-item label="编号">
              <el-input v-model="product.id" placeholder="请输入商品编号" disabled></el-input>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="product.title" placeholder="请输入商品标题"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                      class="picture"
                      action="/api/upload/images"
                      name="imageFile"
                      :show-file-list="false"
                      :on-success="handleProductUploadSuccess"
                      :before-upload="beforeProductUpload">
                <img v-if="product.image" :src="product.image" class="product">
                <i v-else class="el-icon-plus product-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="折扣价格">
              <el-input v-model="product.discount" placeholder="请输入折扣价格"></el-input>
            </el-form-item>
            <el-form-item label="原价">
              <el-input v-model="product.price" placeholder="请输入商品原价"></el-input>
            </el-form-item>
            <el-form-item label="销量">
              <el-input v-model="product.sales" placeholder="请输入商品销量"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input v-model="product.stock" placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="product.categoryId" placeholder="请选择商品分类">
                <el-option
                        v-for="category in categories"
                        :key="category.id"
                        :label="category.name"
                        :value="category.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="浏览量">
              <el-input v-model="product.views" placeholder="请输入商品浏览量"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateProduct">修改商品</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 商品管理结束 -->
        <!-- 新闻列表开始 -->
        <div v-if="activeMenuIndex=='4-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
            <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 添加新闻 -->
        <div v-if="activeMenuIndex=='4-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加新闻</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- 引入axios -->
<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: function () {
      return {
        // 当前登录的用户名
        username: "",
        // 当前激活的菜单项
        activeMenuIndex: "1-1",
        // 正在编辑的分类
        category: {
          id: 0,
          name: "",
          display: true,
          orderNum: 0
        },
        // 正在编辑的轮播图
        banner: {
          id: 0,
          image: "",
          orderNum: 0
        },
        // 正在编辑的商品
        product: {
          id: 0,
          title: "",
          discount: 0,
          price: 0,
          sales: 0,
          image: ""
        },
        // 分类列表
        categories: [
          {id: 1, name: '精彩活动', orderNum:1, display: true},
          {id: 2, name: '精品女装', orderNum:2, display: true},
          {id: 3, name: '品牌男装', orderNum:3, display: true},
          {id: 4, name: '母婴产品', orderNum:4, display: true},
          {id: 5, name: '医药健康', orderNum:5, display: true},
          {id: 6, name: '数码科技', orderNum:6, display: true}],
        // 轮播图列表
        banners: [
          {id: 1, image: 'imgs/b1.jpg', orderNum: 1},
          {id: 2, image: 'imgs/b2.jpg', orderNum: 2},
          {id: 3, image: 'imgs/b3.jpg', orderNum: 3}],
        // 商品列表
        products: [
          {id:2, title: '森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342},
          {id:3, title: '茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装', discount: 233, price: 598, image: 'imgs/b.jpg', sales: 2342},
          {id:4, title: '雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins', discount: 233, price: 598, image: 'imgs/c.jpg', sales: 2342},
          {id:5, title: '【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬', discount: 233, price: 598, image: 'imgs/d.jpg', sales: 2342},
          {id:6, title: 'BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins', discount: 233, price: 598, image: 'imgs/e.jpg', sales: 2342},
          {id:6, title: '香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣', discount: 233, price: 598, image: 'imgs/f.jpg', sales: 2342},
          {id:7, title: 'SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦', discount: 233, price: 598, image: 'imgs/g.jpg', sales: 2342},
          {id:9, title: '美特斯邦威女MTEE 贺岁系列中长款风衣736598', discount: 233, price: 598, image: 'imgs/h.jpg', sales: 2342},
          {id:10, title: 'imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套', discount: 233, price: 598, image: 'imgs/i.jpg', sales: 2342},
          {id:11, title: 'BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣', discount: 233, price: 598, image: 'imgs/j.jpg', sales: 2342},
          {id:12, title: '憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外', discount: 233, price: 598, image: 'imgs/k.jpg', sales: 2342},
          {id:13, title: '美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342}]
      }
    },
    methods: {
      // 处理导航菜单选择事件
      handleMenuSelect(key, keyPath) {
        this.activeMenuIndex = key
        if (key === "1-1") {
          // 切换到分类列表就加载分类列表
          this.loadCategories();
        } else if(key === '1-2') {
          // 切换到添加分类就清空表单
          this.category = {name: '', orderNum: 1, display: true};
        } else if (key === "2-1") {
          // 切换到Banner列表就加载Banner列表
          this.loadBanners();
        } else if(key === '2-2') {
          // 切换到添加Banner就清空表单
          this.banner = {image: '', orderNum: 1};
        } else if (key === "3-1") {
          // 切换到商品列表就加载商品列表
          this.loadProducts();
        } else if(key === '3-2') {
          // 切换到添加商品就清空表单
          this.product = {title: '', discount: 100, price: 0, image: '', sales: 0};
        }
      },
      clone(obj) {
        // 深拷贝
        return JSON.parse(JSON.stringify(obj));
      },
      formatBoolean(row, column) {
        if (row.display) {
          return "是";
        } else {
          return "否";
        }
      },
      loadCategories() {
        // 加载分类列表
        console.log("加载分类列表");
        axios.get("/api/categories").then(function (response) {
          app.categories = response.data;
        }).catch(function (error) {
          console.log(error);
        });
      },
      deleteCategory(i, category) {
        // 删除分类, 确认后删除
        this.$confirm('确认删除分类 '+category.name+' 吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete('/api/categories/' + category.id).then(function (response) {
            app.categories.splice(i, 1); // 从数组中删除
            app.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(function (error) {
            app.$message.error(error);
          });
        });
          //   axios.get("/api/categories/delete?id="+category.id).then(function (response) {
          //     app.categories.splice(i, 1);
          //     app.$message({
          //       type: 'success',
          //       message: '删除成功!'
          //     });
          //   }).catch(function (error) {
          //     app.$message.error(error);
          //   });
          // });

      },
      editCategory(i, category) {
        this.category = this.clone(category);
        app.$message('编辑分类 '+category.name)
        app.activeMenuIndex = "1-3";
      },
      updateCategory() {
        // app.$message('更新分类 '+app.category.name)
        let id = app.category.id;
        axios.put('/api/categories/'+id, app.category).then(function (response) {
          // 清空表单
          app.category = {name: '', display: true};
          app.$message({
            type: 'success',
            message: '更新成功!'
          });
          // 更新成功后跳转到分类列表
          app.handleMenuSelect("1-1")
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      addCategory() {
        axios.post('/api/categories', app.category).then(function (response) {
          // 清空表单
          app.category = {name: '', display: true};
          app.$message({
            type: 'success',
            message: '保存成功!'
          });
          // 保存成功后跳转到分类列表
          app.activeMenuIndex = "1-1";
          app.loadCategories()
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      loadBanners() {
        // 加载轮播图列表
        console.log("加载轮播图列表");
        axios.get("/api/banners").then(function (response) {
          app.banners = response.data;
        }).catch(function (error) {
          console.log(error);
        });
      },
      handleBannerUploadSuccess(res, file) {
        app.banner.image = res;
      },
      beforeBannerUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isGIF = file.type === 'image/gif';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG && !isGIF && !isBMP) {
          this.$message.error('上传图片只能是 JPG/PNG/GIF/BMP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG || isGIF || isBMP) && isLt2M;
      },
      addBanner() {
        // app.$message('保存轮播图 '+app.banner.image)
        axios.post('/api/banners', app.banner).then(function (response) {
          // 清空表单
          app.banner = {image: '', orderNum: 0};
          app.$message({
            type: 'success',
            message: '保存成功!'
          });
          // 保存成功后跳转到轮播图列表
          app.activeMenuIndex = "2-1";
          app.loadBanners()
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      editBanner(i, banner) {
        app.$message('编辑轮播图 '+banner.image)
        app.banner = this.clone(banner);
        app.activeMenuIndex = "2-3";
      },
      updateBanner() {
        // app.$message('更新轮播图 '+app.banner.image)
        axios.put('/api/banners/'+app.banner.id, app.banner).then(function (response) {
          // 清空表单
          app.banner = {image: '', orderNum: 0};
          app.$message({
            type: 'success',
            message: '更新成功!'
          });
          // 更新成功后跳转到轮播图列表
          app.handleMenuSelect("2-1")
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      deleteBanner(i, banner) {
        // app.$message('删除轮播图 '+banner.image)
        app.$confirm('确认删除轮播图 '+banner.id +' 吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete('/api/banners/'+banner.id).then(function (response) {
            app.banners.splice(i, 1); // 从数组中删除
            app.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(function (error) {
            app.$message.error(error);
          });
        });
      },
      loadProducts() {
        // 加载商品列表
        console.log("加载商品列表");
        axios.get("/api/products").then(function (response) {
          app.products = response.data;
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      editProduct(i, product) {
        // app.$message('编辑商品 '+product.title)
        app.product = this.clone(product);
        app.activeMenuIndex = "3-3";
      },
      updateProduct() {
        // app.$message('更新商品 '+app.product.title)
        let id = app.product.id;
        axios.put('/api/products/'+id, app.product).then(function (response) {
          // 清空表单
          app.product = {title: '', image: '', price: 0, stock: 0, display: true};
          app.$message({
            type: 'success',
            message: '更新成功!'
          });
          // 更新成功后跳转到商品列表
          app.handleMenuSelect("3-1")
          app.loadProducts()
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      addProduct() {
        // app.$message('保存商品 '+app.product.title)
        axios.post('/api/products', app.product).then(function (response) {
          // 清空表单
          app.product = {title: '', image: '', price: 0, stock: 0, display: true};
          app.$message({
            type: 'success',
            message: '保存成功!'
          });
          // 保存成功后跳转到商品列表
          app.activeMenuIndex = "3-1";
          app.loadProducts()
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      deleteProduct(i, product) {
        //app.$message('删除商品 '+product.title)
        // 先确认是否需要删除当前的商品
        app.$confirm('确认删除商品 '+product.title +' 吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete('/api/products/'+product.id).then(function (response) {
            app.products.splice(i, 1); // 从数组中删除
            app.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(function (error) {
            app.$message.error(error);
          });
        });
      },
      handleProductUploadSuccess(res, file) {
        app.product.image = res;
      },
      beforeProductUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isGIF = file.type === 'image/gif';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG && !isGIF && !isBMP) {
          this.$message.error('上传图片只能是 JPG/PNG/GIF/BMP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG || isGIF || isBMP) && isLt2M;
      },
      logout() {
        axios.get("/users/logout").then(function (response) {
          console.log(response);
          location.href="/login.html";
        }).catch(function (error) {
          app.$message.error(error);
        });
      },
      loadUserInfo(){
        axios.get("/users/current").then(function (response) {
          app.username = response.data;
        }).catch(function (error) {
          app.$message.error(error);
        });
      }
    },
    mounted() {
      this.loadCategories()
      this.loadUserInfo()
    }
  })
</script>
</html>